<script lang="ts" setup>
// import { getCaptcha } from "@/api/test";
import { getCaptcha } from "@/api/auth/login";
import { useAuthStore } from "@/store";
import type { FormRules, FormInstance } from "element-plus";

defineOptions({
  name: "LoginView",
});

const initForm = {
  grantType: "captcha",
  tenantId: "",
  account: "develop",
  password: "123456",
  type: "account",
  code: "",
  key: "",
};

const authStore = useAuthStore();

const formRef = ref<FormInstance>();

const formDate = reactive<Api.LoginByPwdReq>(initForm);

const rules = reactive<FormRules<Api.LoginByPwdReq>>({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  code: [{ required: true, message: "请输入验证码", trigger: ["blur", "change"] }],
});
const captchaImgBase64 = ref("");

onMounted(async () => {
  await refreshCaptcha();
});

const refreshCaptcha = async () => {
  const [err, res] = await getCaptcha();
  if (!err) {
    captchaImgBase64.value = res?.image;
    formDate.key = res?.key;
  }
};

const onSubmit = async () => {
  // console.log("---", formRef.value);
  formRef.value?.validate(async (valid) => {
    if (valid) {
      await authStore.login(formDate);
    }
  });
};
</script>
<template>
  <div class="login flex justify-center items-center h-full">
    <el-form ref="formRef" :model="formDate" :rules="rules" size="large" style="width: 300px">
      <el-form-item label="" prop="tenantId">
        <el-input v-model="formDate.tenantId" placeholder="请输入资方ID" clearable></el-input>
      </el-form-item>
      <el-form-item prop="account">
        <el-input v-model="formDate.account" placeholder="请输入账号" clearable></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="formDate.password"
          type="password"
          placeholder="请输入密码"
          clearable
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          v-model="formDate.code"
          clearable
          placeholder="请输入验证码"
          class="captcha-input"
          @keyup.enter="onSubmit"
        ></el-input>
        <el-image
          :src="captchaImgBase64"
          fit="cover"
          :lazy="true"
          class="captcha-img"
          @click="refreshCaptcha"
        >
          <template #error>
            <div class="image-slot">
              <el-icon size="32"><i-ep-picture /></el-icon>
            </div>
          </template>
        </el-image>
      </el-form-item>

      <el-form-item>
        <el-button class="login-btn" type="primary" @click="onSubmit"> 登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
.login {
  &-btn {
    width: 100%;
  }
  .captcha-input {
    width: 60%;
  }
  .captcha-img {
    width: 110px;
    height: 38px;
    margin-left: auto;
  }

  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
  }
}
</style>
